<template>
  <div>
    <el-table :data="paginatedData" style="width: 100%">
      <el-table-column label="ID" prop="ID" />
      <el-table-column label="username" prop="username" />
      <el-table-column align="right">
        <template #header>
          <el-button size="samll" @click="showDialogAdd = true">+</el-button>
          <el-input
            v-model="search"
            size="small"
            placeholder="Type to search"
          />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleTop(scope.$index, scope.row)">
            置顶
          </el-button>
          <el-button size="small" @click="handleChange(scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="userList.length"
    ></el-pagination>
    <el-dialog
      title="编辑用户信息"
      v-model="showDialog"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-width="80px">
        <el-form-item label="ID">
          <el-input v-model="form.ID" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加用户信息"
      v-model="showDialogAdd"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="formAdd" label-width="80px">
        <el-form-item label="用户名">
          <el-input placeholder="请填写用户名" v-model="formAdd.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" placeholder="请填写密码" v-model="formAdd.password"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button @click="showDialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="saveFormAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
</template>
<script>
import { ref, computed } from "vue";
import { getUserList, DeleteUser, UpdateUser, AddUser } from "../api/request";

export default {
  setup() {
    const userList = ref([]);
    const pageSize = ref(10);
    const currentPage = ref(1);
    const showDialog = ref(false);
    const showDialogAdd = ref(false);
    const form = ref({
      ID: "",
      username: "",
      password: "",
    });
    const formAdd = ref({
      username: "",
      password: "",
    });

    const saveForm = () => {
      console.log(form.value);
      UpdateUser(form.value).then((res) => {
        console.log(res);
        if (res.code === 200) {
          alert('修改成功');
        } else {
          alert('修改失败');
        }
      });
      showDialog.value = false;
    };
    const saveFormAdd = () => {
      console.log(formAdd.value);
      AddUser(formAdd.value).then((res) => {
        console.log(res);
        if (res.code === 200) {
          alert('添加成功');
        } else {
          alert('添加失败');
        }
      });
      showDialogAdd.value = false;
      
    };

    const search = ref("");
    const filterTableData = computed(() => {
      return userList.value.filter((data) =>
        !search.value || data.username.toLowerCase().includes(search.value.toLowerCase())
      );
    });

    const paginatedData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filterTableData.value.slice(start, end);
    });

    getUserList().then((res) => {
      userList.value = res;
    });
    
    const handleTop = (index) => {
      const temp = userList.value[index];
      userList.value.splice(index, 1);
      userList.value.unshift(temp);
    };
    const handlePageChange = (page) => {
      currentPage.value = page;
    };

    const handleDelete = (index, row) => {
      DeleteUser({ ID: row.ID }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          userList.value.splice(index, 1);
          alert('删除成功');
        } else {
          alert('删除失败');
        }
      });
    };

    const handleChange = (index, row) => {
      showDialog.value = true;
      form.value = row;
    };

    return {
      userList,
      pageSize,
      currentPage,
      showDialog,
      showDialogAdd,
      form,
      formAdd,
      saveForm,
      saveFormAdd,
      search,
      filterTableData,
      paginatedData,
      handlePageChange,
      handleTop,
      handleDelete,
      handleChange,
    };
  },
};
</script>
<style>

.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}


.pagination-wrapper {
  background-color: #ff9eb5; 
  padding: 10px; 
  border-radius: 5px; 
}


.pagination-wrapper a {
  color: #fff; 
  font-size: 16px;
  margin: 0 5px; 
  text-decoration: none; 
}

.pagination-wrapper a:hover {
  text-decoration: underline; 
}

.pagination-wrapper .active {
  font-weight: bold; 
}

</style>